
// 1.需要获取的操作元素

// 列表盒子
const listBox = document.querySelector('.table .list')
// 总学生数统计
const total = document.querySelector('.total')

// 代码优化方法：使用serialize
// 得到弹窗的form数据
const form = document.querySelector('#form')
// const data = serialize(form, { hash: true, empty: true })

// 2.登录成功后立即渲染---->渲染右上角用户名
function setUserName() {
    //1。获取本地存储数据
    let uname = localStorage.getItem('username')
    const userBox = document.querySelector('.username')
    if (uname) {
        userBox.innerHTML = uname

    } else {
        userBox.innerHTML = ""
    }

}
setUserName()
// 3.1通过token获取所有学生列表数据(通过数据剥离和拦截器：进行代码优化)--->
//  return 成功获取的学生列表数据
async function getStudentaList() {


    let token = localStorage.getItem('token')
    let res = await axios({
        url: '/students',

        //优化--1
        // headers: {
        //     Authorization: token

        // }
    })
    console.log('成功获取的学生列表数据:', res.data);
    let studentsList = res.data
    return studentsList

    // 优化--2
    // //失败状态码401 由此判断失败
    // console.log('失败的对象', error);

    // if (error.response.status == 401) {
    //     pxmu.toast('登录过期，请重新登录')
    //     setTimeout(function () {
    //         location.href = './login.html'
    //     }, 2000)
    // }

    //优化--3 直接去除--->try{}catch(){}


}

// 3.2 退出登录
// 需要 将本地存储的数据 清除
document.querySelector('#logout').addEventListener('click',async function(){
    let dialog = await pxmu.diaglog('您确定退出吗?')
    if(dialog.btn  =='right'){
     // 清除本地缓存
     localStorage.removeItem('token')
     localStorage.removeItem('username')
     // 跳转到页面
     location.href='./login.html'
    }
 })


// 4.学生数据渲染，每次进行数据修改：增加，修改，删除之后需要进行重新渲染
async function render() {
    let studentslist = await getStudentaList()

    // 总学生数统计
    total.innerHTML = studentslist.length
    // 模板字符串进行,数据渲染 
    let str = ''
    studentslist.forEach(element => {
        str +=
            `
        <tr>
                      <td>${element.name}</td>
                      <td>${element.age}</td>
                      <td>${genders(element.gender)}</td>
                      <td>第${element.group}组</td>
                      <td>${element.hope_salary}</td>
                      <td>${element.salary}</td>
                      <td>${element.province}${element.city}${element.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${element.id}></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${element.id}></i></a>
                      </td>
                    </tr>
        `
    })

    listBox.innerHTML = str

}
// 5.进入该界面立即渲染一次
render()
// 6.性别判断函数
function genders(gender) {
    if (gender) {
        return '女'
    } else {
        return '男'
    }
}



//  7.数据管理功能实现*****

// 7.1增加功能:添加,确认按钮、
const confirm = document.querySelector('#submit')

// 显示弹框
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)

document.querySelector('#openModal').addEventListener('click', (e) => {
    e.preventDefault()
    // 设置模态框的值，用于判断操作 -->修改还是增加

    // 调用省市区函数
    initWhere()

    modalDom.dataset.id = undefined
    // 需要对弹窗数据进行格式化
     clear()

    //显示弹窗
    modal.show()

})

// 重点实现省市区,数据联动获取??!!!!

// 省市区联动,proSelect将获取到name="province"的<select>元素，citySelect将获取到name="city"的<select>元素，areaSelect将获取到name="area"的<select>元素

//全局元素,下面 修改可以用
const proSelect = document.querySelector('[name=province]');
const citySelect = document.querySelector('[name=city]');
const areaSelect = document.querySelector('[name=area]');

// 省市区数据选择函数
async function initWhere() {
    let resPro = await axios({
        url: '/api/province',
    });
    const proHtml = resPro.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('');
    proSelect.innerHTML = `<option value="">--省份--</option>${proHtml}`;

    // 为省份选择框添加 change 事件
    proSelect.addEventListener('change', async () => {
        let selectedProvince = proSelect.value;
        let resCity = await axios({
            url: `/api/city?pname=${selectedProvince}`
        });
        const cityHtml = resCity.list.map(v => {
            return `<option value="${v}">${v}</option>`
        }).join('');
        citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`;

        // 清空地区选择框
        areaSelect.innerHTML = `<option value="">--地区--</option>`;
    });

    // 为城市选择框添加 change 事件
    citySelect.addEventListener('change', async () => {
        let selectedProvince = proSelect.value;
        let selectedCity = citySelect.value;
        let resArea = await axios({
            url: `/api/area?pname=${selectedProvince}&cname=${selectedCity}`
        });
        const areaHtml = resArea.list.map(v => {
            return `<option value="${v}">${v}</option>`
        }).join('');
        areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`;
    });
}
// initWhere()

// 获取所有表单数据并添加,使用serialize插件,更快捷!!!

// ***增加函数
async function addData() {

    // 调用函数得到 省市区
  

    //使用serialize插件,因为serialize获取的默认为字符串,不符合传入数据的 参数类型 的要求,会报错,需要进行数据转换

    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })

    // 数据转换
    data.age = parseInt(data.age)
    data.gender = parseInt(data.gender)
    data.group = parseInt(data.group)
    data.hope_salary = parseInt(data.hope_salary)
    data.salary = parseInt(data.salary)
    console.log('添加的数据转换后:', data)

   await axios({
        url: "/students",
        method: 'POST',
        data: data
    })

    render()
    // return data
}

// 7.2删除功能实现--->事件委托
// 删除事件委托
listBox.addEventListener('click', async (e) => {
    e.preventDefault()
    // 删除元素判断 .contains('class')方法
    //使用 pxmu.diaglog实现弹窗删除确认
    if (e.target.classList.contains('bi-trash')) {
        pxmu.diaglog({
            congif: {
                animation: 'slidedeg', //自定义动画 动画名详见动画文档
            }
        }).then(async (res) => {
            if (res.btn == 'right') {
                //点击了右侧按钮

                let id = e.target.dataset.id
               // 删除函数，通过data-id,进行数据定点删除
                await delData(id)

                //渲染延时性??
                render()
            } else {
                //点击了左侧按钮,取消
                return
            }
        });

    }

})

// 学生列表：1. 删除函数
async function delData(id) {
    try {
        //删除请求
        let student = await axios({
            url: `/students/${id}`,
            method: 'DELETE'
        })
    } catch (error) {
        alert('删除请求出错', error)
    }

}


// 7.3 修改功能--->事件委托
// 修改请求：
// 需求分析，修改之前先发送请求获取学生详情，然后修改,修改后发送请求提交,-->两次请求!!!

// 事件委托-->

// 将数据回显
function modify() {
    listBox.addEventListener('click', async (e) => {
        
        e.preventDefault()
        if (e.target.classList.contains('bi-pen')) {
            // 获取元素上的 id
            let id = e.target.dataset.id
           // 设置为id ，和上面的增加操作进行区分
            modalDom.dataset.id = id
            // 数据回显
           await huiXian(id)
            // 显示弹窗
            modal.show()
        }
    })
}
// 数据回显调用
modify()


// 增加确认按钮，修改确认按钮
// 重点：由于在同一个弹窗，需要确认操作，修改还是增加
async function confrm() {
    //  点击事件,用于数据修改保存-->并提交
   confirm.addEventListener('click', async (e) =>{
    e.preventDefault()

    if (e.target.parentNode.parentNode.dataset.id) {
        let id = e.target.parentNode.parentNode.dataset.id

         //使用serialize插件,因为serialize获取的默认为字符串,不符合传入数据的 参数类型 的要求,会报错,需要进行数据转换
    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })

    // 数据转换得到 修改后的-->学生个人数据
    data.age = parseInt(data.age)
    data.gender = parseInt(data.gender)
    data.group = parseInt(data.group)
    data.hope_salary = parseInt(data.hope_salary)
    data.salary = parseInt(data.salary)
    console.log('数据转换后:', data)
        // 说明是修改操作，调用修改相关函数并传递对应参数
       await modifyData(id,data);
        modal.hide()   
    } else {
    //为否时--> 说明是新增操作，调用新增相关函数
    await addData()
    // 隐藏弹窗
    modal.hide()
   
    }
})
}

confrm()

// 获取数据函数
// async function getTCdata(params) {
    
// }


// 第一次请求:获取学生数据详情
async function getPerData(id) {

    try {
        let student = await axios({
            url: `/students/${id}`,
            method: 'GET'
        })
        console.log('得到需要修改的学生的详情', student);
        return student.data
    } catch (err) { }
    alert('获取学生数据详情请求出错', err.response.data.message)
}

// 第二次:修改学生详情,再提交
async function modifyData(id, data) {
    try {

        let stu = await axios({
            url: `/students/${id}`,
            method: 'PUT',
            data: data
        })
        render()
    } catch (error) {
        alert('修改学生数据详情请求出错', error.response.data.message)
    }
}

// 回显数据函数
async function huiXian(id) {
    // 数据回显操作,先获取发送请求--获取数据,再渲染在弹窗内容上,再进行弹窗显示
    let personData = await getPerData(id)
     
  
    // 修改标题
    document.querySelector('.modal-title').innerText = '修改学员'

    document.querySelector('.modal-content').dataset.id = id
 
    // 设置输入框(姓名，年龄，组号，期望薪资，就业薪资)
    // 属性名数组
    //  name-classname表示得到name为该类名的元素,personData[key]
    const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
    keyArr.forEach(key => {
        document.querySelector(`[name=${key}]`).value = personData[key]
    })

    // 设置性别（0 男，1 女）
    const { gender } = personData
    // 伪数组[男checkbox,女checkbox]

    //设置男女单选--->由于0 男，1 女,刚好对应数组索引0,1  
    // arr[gender].checked = true
    const chks = document.querySelectorAll('[name=gender]')
    chks[gender].checked = true

    // 设置籍贯
    //  获取数据
    const { province, city, area } = personData

    //   // 设置省（设置select标签的value属性，对应的option会被选中）
    proSelect.value = province

    //  // 设置市
    const cityRes = await axios.get(`/api/city?pname=${province}`)
    const cityHtml = cityRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')
    citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
    citySelect.value = city

    // 设置区
    const areaRes = await axios.get('/api/area', {
        params: {
            pname: province,
            cname: city
        }
    })
    const areaHtml = areaRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')
    areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    areaSelect.value = area
}  

// 需要执行添加操作时，将模态框清空函数
async function clear() {
  
    // 修改标题
    document.querySelector('.modal-title').innerText = '添加学员'

    // document.querySelector('.modal-content').dataset.id = id
 
    // 设置输入框(姓名，年龄，组号，期望薪资，就业薪资)
    // 属性名数组
    //  name-classname表示得到name为该类名的元素,personData[key]
    const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
    keyArr.forEach(key => {
        document.querySelector(`[name=${key}]`).value = ''
    })

    // 设置性别（0 男，1 女）
   
    // 伪数组[男checkbox,女checkbox]

    //设置男女单选--->由于0 男，1 女,刚好对应数组索引0,1  
    // arr[gender].checked = true

    // 设置初始为男
    const chks = document.querySelectorAll('[name=gender]')
    chks[0].checked = true

  // 清空籍贯（省份，城市，地区）
  proSelect.innerHTML = '<option value="">--省份--</option>'
  citySelect.innerHTML = '<option value="">--城市--</option>'
  areaSelect.innerHTML = '<option value="">--地区--</option>'

//   initWhere()

}  



